<template>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">开始 {{ value1 }}</span>
      <el-date-picker :value-format="valuFormat" v-model="value1" type="datetime"
        :disabled-date="disabledDate1" :disabled-hours="disabledHours1"
        :disabled-minutes="disabledMinutes1" :disabled-seconds="disabledSeconds1" />
    </div>

    <div class="block">
      <span class="demonstration">结束 {{ value2 }}</span>
      <el-date-picker :value-format="valuFormat" v-model="value2" type="datetime"
        :disabled-date="disabledDate2" />
    </div>
  </div>
</template>

<script  setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')

const valuFormat = "YYYY-MM-DD HH:mm:ss"

function disabledDate2(date) {
  if (!value1.value) return false;
  const r = new Date(value1.value) - date
  return r < 0 || r > 24 * 3600 * 1000;
}


function disabledDate1(date) {
  if (!value2.value) return false;
  const r = new Date(value2.value) - date
  return r < 0 || r > 24 * 3600 * 1000;
}


function disabledHours1() {
  if (!value2.value) return [];
  return [0, 1, 2, 3, 4]
}
function disabledMinutes1() {
  if (!value2.value) return [];
  return []
}
function disabledSeconds1() {
  if (!value2.value) return [];
  return []
}



</script>
<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
